// 1.引入vue和vuex
import Vue from "vue";
import Vuex from "vuex";

// 2.使用vuex插件
Vue.use(Vuex);

// 3. 实例一个vuex仓库 并暴漏
// 4. 给仓库传入配置(state mutations actions getters modeules)
export default new Vuex.Store({
  state: {
    count: 0,
    num: 2
  },
  /* 
    更改Vuex的store中的状态唯一的方法是提交mutation
    Vuex中的mutation 非常类似于事件 每个mutation 都有一个字符串的 事件类型
    (type)和一个回调函数(handler)
    mutations函数会接受state作为第一个参数
  */
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    // 你可以向 store.commit 传入额外的参数，即mutation 的载荷 (payload) 
    // 在mutations 方法中第二个参数接受
    incrementN(state, payload) {
      state.count += payload.n;
    }
  },
  actions: {

    // mutation中的异步函数中的回调无法让工具devtools监听到 因为当mutation 触发的时候，回调函数还没有被调用 devtools 不知道什么时候回调函数实际上被调用  实质上任何在回调函数中进行的状态的改变都是不可被vue的devTools追踪的

    /* 
    
    actions 中方法的任务 1.执行异步操作 2.提交mutations更新state
    actions 的方法接收一个阉割版的store作为参数 我们可以只用store上的commit方法提交mutation
    actions的方法接收的的第二个参数是dispath时候传递的参数
    */
    incrementWait(store) {
      setTimeout(() => {
        store.commit("increment");
      }, 2000);
    },
    incrementWaitN(store, n) {
      setTimeout(() => {
        store.commit("incrementN", { n: n });
      }, 2000);
    }
  },
  getters: {}
});